import React from 'react'
import { Outlet,NavLink} from 'react-router-dom'
import {mainRouter} from '../router/routerConfig'
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO,CartO ,TodoListO,Search,SettingO } from '@react-vant/icons';
function Home() {
  return (
    <div>
        
        <main>
            <Outlet></Outlet>
        </main>
        <footer>
          <Tabbar>
          {
            mainRouter.length ? mainRouter.map((item,index)=>{
              return <Tabbar.Item icon={item.icon} key={index}>
                <NavLink to={item.path}>{item.title}</NavLink>
              </Tabbar.Item>
            }):'暂无数据'
          }
            {/* {
              mainRouter && mainRouter.map((item,index)=>{
                return <Tabbar.Item icon={item.icon} key={index}>
                  <NavLink to={item.path}>{item.title}</NavLink>
                </Tabbar.Item>
              })
            }
           */}
          {/* <Tabbar.Item badge={{ dot: true }} icon={<Search />}>
            标签
          </Tabbar.Item>
          <Tabbar.Item badge={{ content: 5 }} icon={<FriendsO />}>
            标签
          </Tabbar.Item>
          <Tabbar.Item badge={{ content: 20 }} icon={<SettingO />}>
            标签
          </Tabbar.Item> */}
        </Tabbar>
        </footer>
    </div>
  )
}

export default Home